<template>
  <div class="page-container">
    <title-line title="开户记录" />
    <div class="content-container">
      <div class="search-wrapper">
        <el-form :inline="true" :model="queryParams" ref="queryRef">
          <el-form-item prop="systemType">
            <el-select
              clearable
              v-model="queryParams.systemType"
              placeholder="请选择广告媒体"
              style="width: 180px"
            >
              <el-option
                v-for="item in bus_system_type"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item prop="applyStatus" style="width: 180px">
            <el-select placeholder="开户状态" v-model="queryParams.applyStatus">
              <el-option
                v-for="item in bus_approval_status"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              />
            </el-select>
          </el-form-item>
          <el-form-item>
            <el-date-picker
              v-model="dateRange"
              type="datetimerange"
              start-placeholder="开始时间"
              end-placeholder="结束时间"
            />
          </el-form-item>
          <el-form-item>
            <el-button type="text" @click="handleSearch"> 查询 </el-button>
            <el-button type="info" link @click="resetSearch"> 重置 </el-button>
          </el-form-item>
        </el-form>
      </div>
      <div class="table-wrapper">
        <el-table :data="tableData" v-loading="loading">
          <el-table-column type="index" width="50" align="center" />
          <el-table-column prop="id" label="申请ID" align="center" />
          <el-table-column prop="createTime" label="申请时间" align="center" />
          <el-table-column prop="oeid" label="OE ID/CID" align="center" />
          <el-table-column prop="username" label="广告媒体" align="center">
            <template #default="scope">
              <dict-tag
                :options="bus_system_type"
                :value="scope.row.systemType"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="enterpriseName"
            label="开户主体"
            show-overflow-tooltip
            align="center"
          />
          <!-- <el-table-column prop="username" label="开户数量" align="center" /> -->
          <el-table-column prop="username" label="开户状态" align="center">
            <template #default="scope">
              <dict-tag
                :options="bus_approval_status"
                :value="scope.row.approvalStatus"
              />
            </template>
          </el-table-column>
          <el-table-column
            prop="promotionLink"
            label="推广链接"
            min-width="150"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column prop="prestorePrice" label="预存金额" align="center">
            <template #default="scope">
              <span
                style="
                  display: flex;
                  flex-direction: row;
                  align-items: center;
                  justify-content: center;
                "
              >
                {{ scope.row.prestorePrice || "-" }}
                <span v-if="scope.row.currencyType">
                  {{
                    selectDictLabels(bus_currency_type, scope.row.currencyType)
                  }}
                </span>
              </span>
            </template>
          </el-table-column>
          <el-table-column
            prop="approvalRemark"
            label="反馈信息"
            show-overflow-tooltip
            align="center"
          />
          <el-table-column
            fixed="right"
            label="操作"
            width="150"
            align="center"
          >
            <template #default="scope">
              <el-button
                link
                @click="toDetail(scope.row)"
                v-if="
                  scope.row.approvalStatus === '1' ||
                  scope.row.approvalStatus === '2' ||
                  scope.row.approvalStatus === '3'
                "
              >
                查看
              </el-button>
              <el-button
                type="primary"
                link
                @click="editAccount(scope.row)"
                v-if="scope.row.approvalStatus === '3'"
              >
                编辑
              </el-button>
              <!-- <el-button
                link
                @click="toDetail(scope.row)"
                v-if="scope.row.approvalStatus === '1'"
              >
                查看账户
              </el-button> -->
            </template>
          </el-table-column>
        </el-table>
      </div>
      <div class="pager-wrapper">
        <pagination
          v-show="total > 0"
          :total="total"
          v-model:page="queryParams.pageNum"
          v-model:limit="queryParams.pageSize"
          @pagination="getTableData"
        />
      </div>
    </div>
    <googleApplyDialog
      v-model:value="googleVisible"
      v-if="googleVisible"
      :id="recordId"
      @on-success="getTableData"
    />
    <bingApplyDialog
      v-model:value="bingVisible"
      v-if="bingVisible"
      :id="recordId"
      @on-success="getTableData"
    />
    <meteApplyDialog
      v-model:value="metaVisible"
      :id="recordId"
      v-if="metaVisible"
      @on-success="getTableData"
    />
    <titokApplyDialog
      v-model:value="titokVisible"
      :id="recordId"
      v-if="titokVisible"
      @on-success="getTableData"
    />
    <tcriteoApplyDialog
      v-model:value="tcriteoVisible"
      :id="recordId"
      v-if="tcriteoVisible"
      @on-success="getTableData"
    ></tcriteoApplyDialog>
    <MediagoApplyDialog
      v-if="mediagoVisible"
      v-model:value="mediagoVisible"
      :id="recordId"
      @on-success="getTableData"
    ></MediagoApplyDialog>
    <outbrainApplyDialog
      v-if="outbrainVisible"
      v-model:value="outbrainVisible"
      :id="recordId"
      @on-success="getTableData"
    ></outbrainApplyDialog>
    <pinApplyDialog
      v-if="pinVisible"
      v-model:value="pinVisible"
      :id="recordId"
      @on-success="getTableData"
    ></pinApplyDialog>
    <taboolaApplyDialog
      v-if="taboolaVisible"
      v-model:value="taboolaVisible"
      :id="recordId"
      @on-success="getTableData"
    ></taboolaApplyDialog>
    <commonApplyDialog
      v-if="commonVisible"
      v-model:value="commonVisible"
      :systemType="systemType"
      :id="recordId"
      @on-success="getTableData"
    ></commonApplyDialog>
  </div>
</template>

<script setup name="openRecord">
import titleLine from "@/components/Title/title-line.vue";
import { useRouter } from "vue-router";
import { applyPlatform } from "@/const/index.ts";
import { onMounted, ref, reactive } from "vue";
import { getAccountRecordList } from "@/api/apply/index.js";
import bingApplyDialog from "./components/form/bing-apply-dialog.vue";
import googleApplyDialog from "./components/form/google-apply-dialog.vue";
import meteApplyDialog from "./components/form/meta-apply-dialog.vue";
import titokApplyDialog from "./components/form/titok-apply-dialog.vue";
import tcriteoApplyDialog from "./components/form/tcriteo-apply-dialog.vue";
import MediagoApplyDialog from "./components/form/mediago-apply-dialog.vue";
import outbrainApplyDialog from "./components/form/outbrain-apply-dialog.vue";
import pinApplyDialog from "./components/form/pin-apply-dialog.vue";
import taboolaApplyDialog from "./components/form/taboola-apply-dialog.vue";
import commonApplyDialog from "./components/form/common-apply-dialog.vue";

const { proxy } = getCurrentInstance();

const { bus_system_type, bus_approval_status, bus_currency_type } =
  proxy.useDict("bus_system_type", "bus_approval_status", "bus_currency_type");

const router = useRouter();
const dateRange = ref([]);
const loading = ref(false);
const tableData = ref([{}]);
const total = ref(0);
const googleVisible = ref(false);
const bingVisible = ref(false);
const metaVisible = ref(false);
const titokVisible = ref(false);
const tcriteoVisible = ref(false);
const mediagoVisible = ref(false);
const outbrainVisible = ref(false);
const taboolaVisible = ref(false);
const pinVisible = ref(false);
const commonVisible = ref(false);
const recordId = ref("");
const systemType = ref("");

const data = reactive({
  form: {},
  queryParams: {
    pageNum: 1,
    pageSize: 10,
    approvalStatus: undefined,
    systemType: undefined,
  },
});

const { queryParams } = toRefs(data);

function handleSearch() {
  queryParams.pageNum = 1;
  getTableData();
}
function resetSearch() {
  dateRange.value = [];
  proxy.resetForm("queryRef");
  handleSearch();
}
function editAccount(row) {
  recordId.value = row.id;
  systemType.value = row.systemType;
  switch (row.systemType) {
    case applyPlatform.GOOGLE:
      googleVisible.value = true;
      break;
    case applyPlatform.BING:
      bingVisible.value = true;
      break;
    case applyPlatform.META:
      metaVisible.value = true;
      break;
    case applyPlatform.TIKTOK:
      titokVisible.value = true;
      break;
    case applyPlatform.CRITEO:
      tcriteoVisible.value = true;
      break;
    case applyPlatform.MEDIAGO:
      mediagoVisible.value = true;
      break;
    case applyPlatform.OUTBRAIN:
      outbrainVisible.value = true;
      break;
    case applyPlatform.PIN:
      pinVisible.value = true;
      break;
    case applyPlatform.TABOOLA:
      taboolaVisible.value = true;
      break;
    case applyPlatform.LINKEDIN:
    case applyPlatform.YANDEX:
    case applyPlatform.TWITTER:
    case applyPlatform.SANPCHAT:
      commonVisible.value = true;
      break;
    default:
      break;
  }
}

function toDetail(row) {
  router.push({ path: "/accountMng/openAccDetail", query: { id: row.id } });
}

function getTableData() {
  loading.value = true;
  getAccountRecordList(
    proxy.addDateRange(data.queryParams, dateRange.value)
  ).then((res) => {
    loading.value = false;
    tableData.value = res.rows;
    total.value = res.total;
  });
}

onMounted(() => {
  getTableData();
});
</script>

<style lang="scss">
.page-container {
  padding: 10px;
  .content-container {
    display: flex;
    flex-direction: column;
    background-color: #fff;
    .search-wrapper {
      margin: 20px;
      :deep(.el-card__body) {
        padding-bottom: 2px;
      }
    }
  }
}
</style>
